<!DOCTYPE html>
<html>

<head lang="zh-cn">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>成员信息</title>
    <link rel="Shortcut Icon" href="images/logo.gif">
    <link rel="stylesheet" href="libs/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <style>
    #editDialog {
        padding-bottom: 14px;
        color: #fff;
        background-color: #666;
        position: fixed;
        left: 40%;
        top: 100px;
        border: 1px solid #ccc;
        display: none;
    }
    
    #editDialog .box {
        padding: 10px 20px;
    }
    
    #editDialog p {
        border-bottom: 1px solid #fff;
        padding-bottom: 10px;
        font-weight: bold;
        font-size: 16 px;
    }
    
    #editDialog .quit {
        width: 24px;
        height: 24px;
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
        background: url(images/close.png) no-repeat;
        background-size: contain;
    }
    
    #editDialog label {
        font-weight: normal;
    }
    
    #editDialog .btn {
        margin-left: 20px;
    }
    
    .note {
        color: #ccc;
        margin-top: 10px;
        font-size: 10px;
    }
    
    .create-member {
        margin-bottom: 10px;
    }
    
    #manage {
        width: 400px;
        border-radius: 2px;
        border: 1px solid #f4f4f4;
        position: fixed;
        z-index: 99999;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        background-color: #fff;
        color: #666;
        text-align: right;
        box-shadow: 4px 4px 5px #999;
        display: none;
    }
    
    #manage h4 {
        text-align: left;
        padding-left: 10px;
        margin: 0;
        line-height: 2.5;
        background-color: #337ab7;
        color: #fff;
    }
    
    #manage .content {
        padding: 20px 40px;
    }
    
    #manage input,
    #manage select {
        width: 240px;
        height: 36px;
        border-radius: 4px;
        border: 1px solid #d4d4d4;
        text-indent: 10px;
        margin-bottom: 10px;
    }
    
    #manage .btn {
        margin: 10px;
    }
    
    #manage {}
    </style>
</head>

<body>
    <div id="topFix">
        <strong>Admin</strong>
        <small>后台管理系统</small>
        <div class="text">
            <span>
                <i class="glyphicon glyphicon-user"></i> 你好，管理员A
            </span>
            <button class="btn btn-danger btn-sm logout">
                <i class="glyphicon glyphicon-off"></i> 退出
            </button>
        </div>
    </div>
    <div id="wrap">
        <!-- 侧边栏开始 -->
        <div class="sidebar">
            <ul class="nav nav-pills nav-stacked" role="tablist">
                <li class="active">
                    <a href="#list1" data-toggle="collapse">课程管理</a>
                    <ol id="list1" class="nav nav-pills nav-stacked collapse in">
                        <li><a href="allCourses.html">全部课程</a></li>
                        <li><a href="addCourse.html">新建课程</a></li>
                    </ol>
                </li>
                <li class="active">
                    <a href="#list2" data-toggle="collapse">用户管理</a>
                    <ol id="list2" class="nav nav-pills nav-stacked collapse in">
                        <li class="bg-info"><a href="javascript:;">成员信息</a></li>
                        <li><a href="newMember.html">添加用户</a></li>
                        <li><a href="departments.html">科室管理</a></li>
                    </ol>
                </li>
                <li class="active">
                    <a href="#list3" data-toggle="collapse">健康处方</a>
                    <ol id="list3" class="nav nav-pills nav-stacked collapse in">
                        <li><a href="healthContent.html">文件管理</a></li>
                        <li><a href="healthUpload.html">上传文件</a></li>
                    </ol>
                </li>
                <li class="active">
                    <a href="#list4" data-toggle="collapse" class="collapse">管理员设置</a>
                    <ol id="list4" class="nav nav-pills nav-stacked collapse in">
                        <li><a href="#">修改密码</a></li>
                    </ol>
                </li>
            </ul>
        </div>
        <div class="main">
            <!-- 路径导航 -->
            <ol class="breadcrumb">
                <li class="active">用户管理</li>
                <li class="active">成员信息</li>
            </ol>
            <a href="newMember.html" class="btn btn-primary create-member">+ 添加新成员</a>
            <table class="table table-striped table-bordered table-hover table-condensed">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>用户名</th>
                        <th>科室</th>
                        <th>职称</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>0060</td>
                        <td>谢金莲</td>
                        <td>三区</td>
                        <td>副护士长</td>
                        <td>
                            <button class="modify btn btn-link btn-sm"><i class="glyphicon glyphicon-cog"></i> 管理</button>
                            <button class="edit btn btn-link btn-sm"><i class="glyphicon glyphicon-pencil"></i> 修改密码</button>
                            <button class="del btn btn-link btn-sm"><i class="glyphicon glyphicon-trash"></i> 删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>1331</td>
                        <td>邱燕华</td>
                        <td>17区</td>
                        <td>护士</td>
                        <td>
                            <button class="modify btn btn-link btn-sm"><i class="glyphicon glyphicon-cog"></i> 管理</button>
                            <button class="edit btn btn-link btn-sm"><i class="glyphicon glyphicon-pencil"></i> 修改密码</button>
                            <button class="del btn btn-link btn-sm"><i class="glyphicon glyphicon-trash"></i> 删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- 所有页码 -->
            <div class="btn-toolbar text-center">
                <div id="pagebar" class="btn-group btn-group-md"></div>
            </div>
            <!-- 修改密码 -->
            <div id="editDialog">
                <div class="box">
                    <p>修改密码</p>
                    <i class="quit"></i>
                    <div class="form-group form-inline">
                        <label for="#userName">用户名：</label>
                        <input type="text" id="userName" class="form-control" autofocus>
                    </div>
                    <div class="form-group form-inline">
                        <label for="#password">密&nbsp;&nbsp;&nbsp; 码：</label>
                        <input type="text" id="password" class="form-control" minlength="6" placeholder="使用旧密码">
                        <div class="note">*新密码请使用6位以上数字或字母</div>
                    </div>
                    <div class="pull-right">
                        <button class="btn btn-primary confirm">确认</button>
                        <button class="btn btn-default cancel">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 管理弹窗 -->
    <div id="manage">
        <h4>用户管理</h4>
        <div class="content">
            <div>
                <label for="username">用户名：</label>
                <input id="username" type="text">
            </div>
            <div>
                <label for="number">工&nbsp;&nbsp;&nbsp;号：</label>
                <input id="number" type="text">
            </div>
            <div>
                <label for="department">科&nbsp;&nbsp;&nbsp;室：</label>
                <select name="department" id="department">
                    <option value="0">护理部</option>
                    <option value="1">N3</option>
                    <option value="2">17区</option>
                    <option value="3">...</option>
                </select>
            </div>
            <div>
                <label for="jobname">职&nbsp;&nbsp;&nbsp;称：</label>
                <select name="jobname" id="jobname">
                    <option value="0">主管护师</option>
                    <option value="1">副护士长</option>
                    <option value="2">护士</option>
                    <option value="3">...</option>
                </select>
            </div>
            <button class="btn btn-success">确定</button>
            <button class="btn btn-default cancel">取消</button>
        </div>
    </div>
    <script src="libs/jquery-2.1.4.js"></script>
    <script src="libs/bootstrap.min.js"></script>
    <script src="libs/jquery.pagination.js"></script>
    <script>
    $(function() {
        // 分页插件
        $('#pagebar').pagination({
            totalData: 40, //总数据条数
            showData: 20, //每页数据条数
            coping: true, //首页和尾页
            homePage: '首页',
            endPage: '末页',
            prevContent: '上页',
            nextContent: '下页'
        });

        // 修改密码、删除
        (function() {
            var editDialog = $('#editDialog');

            // 嵌套绑定时，需要先取消绑定
            $('.table').on('click', '.edit', function() {
                var nowIndex = $('.edit').index(this);

                editDialog.show().find('#userName').val('用户' + nowIndex)
                    // 退出(需取消原先的绑定，否则执行多次)
                    .end().find('.cancel,.quit').off('click').on('click', function() {
                        editDialog.hide();
                        console.log(1)
                    })
                    .end().find('.confirm').off('click').on('click', function() {
                        alert('修改成功！');
                        editDialog.hide()
                    });
            }).on('click', '.del', function() {
                var nowIndex = $('.del').index(this);
                if (confirm("是否删除用户" + nowIndex + "?")) {
                    alert("删除成功！")
                }
            })
        })();

        // 用户管理
        (function() {
            var $manage = $('#manage');
            var $departmentOpts = $manage.find('#department option');
            var $jobnameOpts = $manage.find('#jobname option');

            $('table').on('click', '.modify', function() {

                var $tr = $(this).closest('tr'); // 对应当前栏
                var number = $tr.children('td:nth(0)').text(); //对应工号
                var username = $tr.children('td:nth(1)').text(); //对应用户名
                var department = $tr.children('td:nth(2)').text(); // 对应科室
                var jobname = $tr.children('td:nth(3)').text(); // 对应职称

                $manage.show().find('#username').val(username)
                    .end().find('#number').val(number);

                for (var i = 0; i < $departmentOpts.length; i++) {
                    if ($departmentOpts.eq(i).text() === department) {
                        $departmentOpts.eq(i).prop('selected', true);
                    }
                }
                for (var i = 0; i < $jobnameOpts.length; i++) {
                    if ($jobnameOpts.eq(i).text() === jobname) {
                        $jobnameOpts.eq(i).prop('selected', true);
                    }
                }

            });
            // 确定&取消
            $manage.find('.cancel').on('click', function() {
                    $manage.hide();
                }).end()
                .find('.btn-success').on('click', function() {
                    $manage.hide();
                    alert('修改成功！');
                });
        })();
    })
    </script>
</body>

</html>
